<template>
  <view class="content">
    <view class="dong1 w100">
      <flow-roll :swilist="swilist"></flow-roll>
    </view>

    <view class="bgred" @click="gostore(detail.relateId)">
      <view class="flex flex-row justify-start items-center w100 store">
        <view class="auth">
          <image
            v-if="detail.merchant.logo"
            :src="detail.merchant.logo"
            mode="aspectFit"
            class="logo"
          >
          </image>

          <image
            v-else
            src="@/static/logo.png"
            mode="aspectFit"
            class="logo"
          ></image>

          <image
            src="@/static/index/v.png"
            mode="widthFix"
            class="v-icon"
          ></image>
        </view>
        <view class="flex flex-col justify-start items-start">
          <text class="f_34 c_f">{{
            detail.merchant.name ? detail.merchant.name : "平台"
          }}</text>
          <view class="f_24 c_f">
            <text class="mr10"
              >{{
                detail.merchant.createDrawCount
                  ? detail.merchant.createDrawCount
                  : 0
              }}抽奖</text
            >
            |
            <text class="ml10"
              >{{
                detail.merchant.subscribeCount
                  ? detail.merchant.subscribeCount
                  : 0
              }}人订阅</text
            >
          </view>
        </view>
        <view style="flex:1;display: flex;
    align-items: center;
    justify-content: flex-end;">
          <text style="font-size: 27rpx;
    background: #fff;
    color: #444;
    padding: 10rpx 20rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;" v-if="ifdy" @tap="dingyue">点击订阅</text>
          <image style="width: 40rpx;height: 90rpx;" src="@/static/arrow-r-white.svg" @click="closePop"></image>
        </view>
      </view>
    </view>
    <view class="list flex flex-col justify-center items-center">
      <view class="flex flex-col justify-start item" style="box-shadow: 0px -12rpx 10rpx 0px rgb(255 255 255 / 50%);">
        <!-- 普通抽奖 -->
        <template v-if="detail.type == 1">
          <image
            v-if="detail.prizes[0].imageUrl && detail.prizes[0].imageUrl != ''"
            class="banner"
            :src="detail.prizes[0].imageUrl"
            mode="aspectFill"
          ></image>
          <view class="info flex flex-col justify-start">
            <view class="c_0 f_30 title">
              奖品：{{ detail.prizes[0].title || '' }}
            </view>
            <view class="info-refresh" @tap="refershPage">刷新</view>
            <template v-if="detail.status == 1">
              <!-- 判断是否为今天  是的话显示倒计时 -->
              <template v-if="isToday(detail.openTime)">
                <view class="flex flex-row justify-start items-center mt_10">
                  <text v-for="(item1, index1) in detail.showtype" :key="index1" class="type_text">{{
                    item1
                  }}</text>
                  <text class="f_22 c_f bg-red kjbtn">即将抽奖</text>
                  <liu-countdown
                    ref="countdown"
                    mode="1"
                    :showDays="false"
                    auto
                    :endDate="detail.openTime"
                    @countdown-finish="handleCountdownFinish"
                  ></liu-countdown>
                </view>
              </template>
              <template v-else>
                <view class="f_24"><text style="color: #DF4B43;">{{ detail.openTime }}</text>  开奖</view>
              </template>
            </template>
            <template v-else-if="detail.status == 2">
              <view class="flex flex-row justify-start items-center mt_10">
                <text v-for="(item1, index1) in detail.showtype" :key="index1" class="type_text">{{
                  item1
                }}</text>
                <text class="f_22 c_f kjbtn bg-red">抽奖中</text>
                <!-- <text>00:00:00</text> -->
              </view>
            </template>
            <template v-else-if="detail.status == 3">
              <view class="flex flex-row justify-start items-center mt_10">
                <text class="f_22 c_9 kjbtn bg-hui">已结束</text>
                <text class="f_22 c_9">00:00:00</text>
              </view>
            </template>

            
          </view>
        </template>
        <!-- 红包抽奖 -->
        <template v-else>
      <!--    <view class="moneybanner flex flex-col justify-center items-center">
            <text class="money c_ffe f_60"
              >￥ <text class="f_110">{{ detail.money }}</text></text
            >
            <text class="money f_28 c_ffe">红包总金额</text>
          </view> -->

          <view class="info flex flex-col justify-start">
            <view class="c_0 f_30 title cd3a">
              瓜分{{ detail.money || '' }}元红包 抽{{ detail.maxPeople || '' }}人
            </view>
            <view class="info-refresh" @tap="refershPage">刷新</view>
            <template v-if="detail.status == 1">
              <!-- 判断是否为今天  是的话显示倒计时 -->
              <template v-if="isToday(detail.openTime)">
                <view class="flex flex-row justify-start items-center">
                  <text class="f_22 c_f bg-red kjbtn">即将抽奖</text>

                  <liu-countdown
                    ref="countdown"
                    mode="1"
                    :showDays="false"
                    auto
                    :endDate="detail.openTime"
                    @countdown-finish="handleCountdownFinish"
                  ></liu-countdown>
                </view>
              </template>
              <template v-else>
                <view class="f_24 c_5a">{{ detail.openTime }} 参与抽奖</view>
              </template>
            </template>
            <template v-else-if="detail.status == 2">
              <view class="flex flex-row justify-start items-center mt_10">
                <text class="f_22 c_f kjbtn bg-red">抽奖中</text>
                <!-- <text>00:00:00</text> -->
              </view>
            </template>
            <template v-else-if="detail.status == 3">
              <view class="flex flex-row justify-start items-center mt_10">
                <text class="f_22 c_9 kjbtn bg-hui">已结束</text>
                <text class="f_22 c_9">00:00:00</text>
              </view>
            </template>

            <view class="hbtag flex flex-row justify-center items-center">
              <image src="@/static/index/hb.svg" mode="widthFix"></image>
              <text class="f_22 red">瓜分红包</text>
            </view>
          </view>
        </template>
      </view>
    </view>

    <!-- 未开奖 -->
    <template v-if="detail.status == 1">
      <view
        class="lottery-button flex justify-center items-center" style="flex-direction: column;"
        @tap="cy(detial)"
      >
       <view> {{ detail.isPlayed ? "已参与" : "参与抽奖" }}</view>
       <view style="font-size: 24rpx;">消耗{{detail.drawNumber || 1}}抽奖</view>
      </view>
    </template>

    <!-- 开奖中 -->
    <template v-if="detail.status == 2">
      <!-- //普通抽奖 九宫格 -->
      <template v-if="detail.type == 1">
        <view
          class="flex flex-col justify-center items-center mt_40 luck_1"
          v-if="detail.isPlayed && myluck2.length == 0"
        >
          <LotteryDraw
            :grid_info_arr="detail.prizes"
            @get_winingIndex="get_winingIndex"
            @luck_draw_finish="luck_draw_finish"
          ></LotteryDraw>
        </view>
        <view
          class="flex flex-row justify-center items-center red w100"
          v-else-if="!detail.isPlayed"
          @click="next"
          >暂未参与本次抽奖，去下个看看吧~</view
        >
      </template>
      <!-- //红包抽奖 -->
      <template v-else>
        <!-- 刮刮卡 -->
        <view
          class=""
          style="width: 70%; margin: 40rpx auto"
          v-if="detail.isPlayed && myluck2.length == 0"
        >
          <scratch-card
            ref="card"
            percentage="10"
            @complete="seatShow"
            :disabled="false"
            title="刮一刮得红包"
            watermark="刮一刮得奖"
          >
            <!-- 刮刮后将显示的内容 -->
            <view class="gua">
              <view
                class="flex luckhb flex-col justify-start items-center"
                v-if="myluck[0].money"
              >
                <text class="mt_60">恭喜获得</text>
                <text class="mt_20 f_42">{{ myluck[0].money }}元红包</text>
              </view>
            </view>
          </scratch-card>
        </view>
        <view
          class="flex flex-row justify-center items-center red w100"
          v-else-if="!detail.isPlayed"
          @click="next"
          >暂未参与本次抽奖，去下个看看吧~</view
        >
      </template>
      <view
        class="lottery-button flex justify-center items-center"
        v-if="myluck2.length > 0"
      >
        已中奖
      </view>
    </template>
    <!-- 	已开奖 -->
    <template v-else-if="detail.status == 3">
      <view class="flex justify-center items-center lottery-button-end">
        已结束
      </view>
    </template>
    <!-- 	已开奖 -->
    <template v-else-if="detail.status == 4">
      <view class="flex justify-center items-center lottery-button-end">
        已取消
      </view>
      <view class="w100 flex justify-center items-center f_22 c_3">{{
        detail.cancelRemark
      }}</view>
    </template>
    <view class="youshare flex flex-row justify-center items-center mt_20 c_5a">
      
      <text
        v-if="detail.recordCount - detail.minPeople >= 0"
        class="f_26 c_1d8"
        @click="
          $util.Tips(
            `/pages/choujiang_user_list/choujiang_user_list?id=${detail.id}`
          )
        "
        >查看参与人 ></text
      >
      <text v-else style="font-size: 24rpx; color: #5a5a5a"
        >已有{{ attend.length }}人参与,还差<text style="color: #DF4B43;">{{ detail.minPeople - detail.recordCount}}</text>人开奖</text
      >
    </view>
    <view class="people">
      <view style="width: 100%; height: 60rpx">
        <mj-avatar-slideshow :urls="attend" width="60" height="60" :overlap="0">
        </mj-avatar-slideshow>
      </view>
    </view>
    <!-- 中奖记录 -->
    <view class="notice flex flex-col" v-if="luckzong.length > 0">
      <view class="title">
        <view class="titlename">中奖记录</view>
      </view>
      <view class="flex flex-col mt_20 myluck w100" v-if="myluck2.length > 0">
        <view class="flex flex-row justify-between items-center w100">
          <text class="c_f f_26">我的中奖记录</text>
          <view class="c_f flex justify-center items-center f_24">
            共1份奖品
            <image
              src="@/static/mine/arrowwhite.svg"
              mode="widthFix"
              style="width: 28rpx"
            ></image>
          </view>
        </view>
        <view class="mylucklist flex flex-col">
          <view
            class="flex flex-row justify-between items-center"
            v-for="(item, index) in myluck2"
            :key="index"
          >
            <view class="flex-col justify-center items-start">
              <view class="f_28 c_3">{{
                item.money ? "红包:" + item.money + "元" : item.prizeDescription
              }}</view>
              <view class="f_24 c_9">{{ item.submitTime }}</view>
            </view>
            <view class="showstatus">
              <text
                class="tabbut tagbut_red"
                v-if="item.status == 0 && item.prizeType == 2"
                @click="
                  $util.Tips(
                    '/subpageB/good_detail/good_detail?id=' + item.good_detail
                  )
                "
                >去使用</text
              >
              <text
                class="tabbut tagbut_red"
                v-else-if="item.status == 0 && item.prizeType == 1"
                @click="
                  $util.Tips(
                    `/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`
                  )
                "
                >去兑奖</text
              >
              <text class="tabbut tagbut_red" v-else-if="item.status == 1"
                @click="
                  $util.Tips(
                    `/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`
                  )
                ">去核销</text
              >
              <text class="tabbut tagbut_red" v-else-if="item.status == 2"
                @click="
                  $util.Tips(
                    `/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`
                  )
                ">出奖中</text
              >
              <text class="tabbut tagbut_hui" v-else-if="item.status == 3"
                >已完成</text
              >
              <text class="tabbut tagbut_hui" v-else-if="item.status == 4"
                >已取消</text
              >
              <text class="tabbut tagbut_hui" v-else-if="item.status == 5"
                >已过期</text
              >
            </view>
          </view>
        </view>
      </view>

      <view class="otherluck" v-if="luck.length > 0">
        <mj-scroll-self :datalist="luck"></mj-scroll-self>
      </view>
    </view>

    <!-- 抽奖说明 -->
    <view class="notice flex flex-col" style="padding-bottom: 140rpx">
      <view class="title">
        <view class="titlename">抽奖说明</view>
      </view>
      <view class="kuang w100">
       最多{{  detail.maxPeople}}人参与, {{ detail.description || '' }}
      </view>
    </view>

    <view class="fixedbtn flex flex-row justify-between u-fixed-bottom">
      <view
        class="flex flex-row justify-between items-end"
        style="width: 100%"
        :class="{ mb_20: !isIPhoneX }"
        
      >
        <view
          class="flex flex-col items-center justify-center cjbtn"
          @click="$util.Tips('/pages/choujiang_add/choujiang_add')"
           v-if="userInfo && userInfo.relateId"
        >
          <image
            src="@/static/index/cj.svg"
            mode="widthFix"
            style="width: 44rpx"
          ></image>
          <text>创建抽奖</text>
        </view>
        <view
          class="flex flex-col items-center justify-ce nter"
          v-if="detail.status != 3"
        >
          <button
            type="default"
            class="sharebtn flex flex-col items-center justify-center"
            open-type="share"
          >
            <image
              src="@/static/index/ic_03.png"
              style="width: 44rpx; height: 44rpx"
            ></image>
            <text>分享</text>
          </button>
        </view>
        <view
          class="btn background_red"
          style="flex:1"
          @click="next"
          v-if="detail.status != 3"
        >
          <image
            src="@/static/index/lw.svg"
            mode="widthFix"
            style="width: 38rpx"
          ></image>
          <text class="f_28">参与下个抽奖</text>
        </view>
        <view
          v-else
          class="btn background_red"
          @click="next"
           style="flex:1"
        >
          <image
            src="@/static/index/lw.svg"
            mode="widthFix"
            style="width: 38rpx"
          ></image>
          <text class="f_28">参与下个抽奖</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import flowRoll from "@/components/flow-roll/flow-roll.vue";

import { toLogin } from "@/libs/login.js";

import { mapGetters } from "vuex";
import {
  cj_event,
  drawInfo,
  drawSubmit,
  drawRcord,
  drawNext,
  drawOpen,
  subscribelistnew,
		storesubscribe
} from "@/api/activity.js";
import {
		subscribe
	} from '@/utils/SubscribeMessage.js';
import scratchCard from "@/components/scratch-card/scratch-card.vue";
import LotteryDraw from "@/components/SJ-LotteryDraw/SJ-LotteryDraw.vue";
export default {
  components: {
    scratchCard,
    LotteryDraw,
    flowRoll,
  },
  computed: mapGetters(["isLogin", "chatUrl", "userInfo", "uid"]),

  onShareAppMessage(e) {
    return {
      title: this.detail.minPeople - this.detail.recordCount > 0?"还差" + (this.detail.minPeople - this.detail.recordCount) + "人参与就可以开奖啦～":"已经开奖拉~ 快来参与",
      // imageUrl: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png",
      imageUrl: this.detail.image ? this.detail.image: 'https://csqx.nangua.website/crmebimage/public/maintain/2024/01/03/c12f84375db54cada7706f512486fe0295hh71vl6z.jpeg',
      path:
        "/subpageB/choujiang_detail/choujiang_detail?id=" +
        this.id +
        "&&shareuid=" +
        this.uid,
    };
  },
  data() {
    return {
      isIPhoneX: this.isIPhoneX,
      swilist: [], //参与滚动消息
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      id: "",
      shareid: "", //邀请用户id
      detail: {},
      attend: [],
      luck: [], //所有中奖
	  luckzong:[],
      myluck: [], //我的中奖
      myluck2: [], //我的中奖 为了区分
      lottery_draw_param: {
        startIndex: 3, //开始抽奖位置，从0开始
        totalCount: 5, //一共要转的圈数
        winingIndex: 3, //中奖的位置，从0开始
        speed: 20, //抽奖动画的速度 [数字越大越慢,默认100]
      },
      ifdy: false
    };
  },
  onShow: function () {
      this.getdetail();
 
  },
  onLoad(data) {
    if (data.id) {
      this.id = data.id;
    }
    //邀请用户id
    if (data.shareid) {
      this.$store.commit("setSpreadId", data.shareuid);
    }
  },

  methods: {
    checkDy() {
      subscribelistnew(this.poram).then(res => {
					var hasId = res.data.list.find((el) => {
						return el.merchantId === this.id;
					});
					if (hasId !== undefined) {
						this.ifdy = true
					} else {
						this.ifdy = false
					}


				})
    },
    dingyue() {
      storesubscribe({
					status: 1,
					merchantId: this.id
				}).then(res => {
					uni.showToast({
						title: '订阅成功',
            icon: 'none'
					})
				})
    },
    refershPage() {
       this.getdetail();
    },
    handleCountdownFinish() {
      console.log("刷新");
      setTimeout(() => {
        this.getDetail()
      }, this.detail.openMinutes * 60 * 1000)
      this.getdetail();
    },
    // 重置刮刮卡
    reset() {
      this.$refs.card.init();
    },
    //刮刮卡成功
    seatShow() {
      if (!this.detail.isPlayed) {
        uni.showToast({
          title: "抱歉，你没有参与抽奖",
        });
        return;
      }
      drawOpen({ activityId: this.id }).then((res) => {
        uni.showToast({
          title: "获得" + res.data.money + "元",
        });
        this.myluck = [];
        this.myluck = this.myluck.concat(res.data);
        console.log(this.myluck);
      });
    },

    // 修改获奖位置（可以在这里获取后台的数据
    get_winingIndex(callback) {
      if (!this.detail.isPlayed) {
        uni.showToast({
          title: "抱歉，你没有参与",
        });
        return;
      }

      drawOpen({ activityId: this.id }).then((res) => {
        let index = this.detail.prizes.findIndex(
          (item) => item.id === res.data.prizeId
        );
        this.myluck = [];

        this.lottery_draw_param.winingIndex = index;
        //props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
        callback(this.lottery_draw_param);
        this.myluck = this.myluck.concat(res.data);
      });
    },
    // 抽奖完成
    luck_draw_finish(param) {
      setTimeout((res) => {
        uni.showModal({
          title: "温馨提示",
          confirmColor: "#ED2B00",
          content: "恭喜获得" + param.title,
          success: () => {
            this.getdetail();
          },
        });
      }, 800);

      console.log(param);
      console.log(`抽到第${param + 1}个方格的奖品`);
    },
    gostore(id) {
      console.log(id);
      if (id) {
        uni.navigateTo({
          url: "/subpageB/store_info/store_info?id=" + id,
        });
      }
    },
    //随机下个
    next() {
      drawNext({ currentId: this.id }).then((res) => {
        if (res.data && res.data.id) {
          uni.navigateTo({
            url: "/subpageB/choujiang_detail/choujiang_detail?id=" + res.data.id,
          });
        } else {
          uni.showToast({
            title: "没有更多抽奖了~",
            icon: "none",
          });
        }
      });
    },
    //参与用户
    getattend() {
      let data = {
        limit: 20,
        page: 1,
        activityId: this.id,
      };
      drawRcord(data).then((res) => {
        this.attend = res.data.list;
      });
    },
    //中奖用户
    getluck() {
      let data = {
        limit: 100,
        page: 1,
        activityId: this.id,
        isMatch: 1,
      };
      drawRcord(data).then((res) => {
		  this.luckzong = res.data.list
      if(this.myluck2.length > 0) {
        
        let newlist =res.data.list.filter(obj => obj.id !== this.myluck2[0].id)
      
          this.luck = newlist;
      } else {
        this.luck = res.data.list
      }
      });
    },
    getmyluck() {
      let data = {
        limit: 100,
        page: 1,
        activityId: this.id,
        isMatch: 1,
        uid: this.uid,
      };
      drawRcord(data).then((res) => {
        this.myluck2 = res.data.list;
      });
    },
    //判断是否为今天
    isToday(e) {
      let date = new Date(e.replace(/-/g, "/"));
      const today = new Date();
      return (
        date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
      );
    },
    //通知事件
    getevent() {
      let data = {
        activityId: this.id,
        pageSize: 20,
      };
      cj_event(data).then((res) => {
        this.swilist = res.data;
      });
    },
    async cy(e) {
      if (this.detail.isPlayed) {
        uni.showToast({
          title: "活动已参与~",
          icon: "none",
        });
        return;
      }
      let data = {
        activityId: this.id,
        inviteUid: this.shareid,
      };
      let info = await drawSubmit(data)
      if (info.code == 200) {
        uni.showToast({
          title: "参与成功",
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: info.message,
          icon: 'none'
        });
      }
      this.getdetail();
      if (this.detail.autoOpen) {
        // 订阅消息
        await subscribe(['c9LZjKIDlw4Ru4dsfF1gMZq3Xipjr77rPIQDTnsrKHQ'])
      } else {
        await subscribe(['esN6ULmYg1s7Jlc9gRpF018gYkwODe6YKNc3ax5NSvk'])
      }
    },
    gettype(item) {
      let arr = [];
      item.map((e, i) => {
        if (e.prizeType == 1) {
          if (e.receiveType == 1) {
            arr.push("物流");
          } else if (e.receiveType == 2) {
            arr.push("自提");
          }
        }
      });
      arr = [...new Set(arr)];

      return arr;
    },
    comtime(time) {
      const now = new Date().getTime();
      const futureDate = new Date(time).getTime();
      const countdown = futureDate - now;
      return countdown;
    },
    //获取详情
    getdetail() {
      uni.showLoading()
      drawInfo(this.id).then((res) => {
        uni.hideLoading()
        if (res.data.type == 1) {
          res.data.showtype = this.gettype(res.data.prizes);
          this.detail = res.data;
        } else {
          this.detail = res.data;
        }
		   if (this.isLogin) {
			   this.getmyluck();
         if (this.detail.status == 1) {
           this.getevent();
         }
          this.checkDy()
		   }

        this.getattend();
        this.getluck();
        
      }).catch(err => {
        console.log(err)
      });
    },
  },
};
</script>

<style lang="scss">
.luckhb {
  width: 100%;
  height: 300rpx;
  //background: url('../../static/images/red-packets.png') no-repeat top;
  background-size: 100% 100%;

  color: #ff774d;
  font-size: 40rpx;
  position: absolute;
  left: 0;
  top: 0;
}
</style>

<style lang="scss">
.goods {
  width: 48%;
  image {
    width: 80%;
    border-radius: 10rpx;
    margin: 20rpx 0;
  }
  .btn {
    width: 200rpx;
    border-radius: 10rpx;
    height: 60rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff774d;
    font-size: 28rpx;
    margin: 20rpx 0;
  }
}
// .gua{
// 	width: 100%;
// 	display: inline-flex;
// 	position: relative;
// }
// .gua::before{
// 	width: 0;
// 	height: 300rpx;
// 	content: "";
// }
.w100 {
  width: 100%;
}
.luck_1 {
  .title {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .titlename {
    width: 400rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff774d;
    height: 50rpx;
    background: linear-gradient(to top, #ffdfaa, #fff6aa);
    border-radius: 80rpx 80rpx 0 0;
    //box-shadow: 0 0 8rpx #FF774D;
    //border: 1rpx solid #FF774D;
  }
}
.luckhb {
  width: 100%;
  height: 300rpx;
  //	background: url('../../static/images/red-packets.png') no-repeat top;
  background-size: 100% 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  color: #ff774d;
  font-size: 40rpx;
  position: absolute;
  left: 0;
  top: 0;
}

.fixedbtn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #ebebeb;
  background-color: #fff;
  z-index: 999;

  .btn {
    width: 50%;
    height: 100rpx;
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    text-align: center;
    display: flex;

    justify-content: center;
    align-items: center;
  }
}

.conter {
  padding-bottom: 100rpx;
}

.notice {
  width: 90%;
  padding: 0 20rpx;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20rpx auto;
  background: #fff;
  min-height: 200rpx;
  border-radius: 10rpx;

  .title {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .titlename {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 50rpx;
    background: linear-gradient(to bottom, #ffaa7f, #ff5500);
    border-radius: 0 0 80rpx 80rpx;
    margin-bottom: 40rpx;
  }

  .kuang {
    background-color: #fff5dc;
    color: #4e3f13;
    border: 1rpx solid #ebebeb;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 40rpx;
    word-break: break-all;
  }
}

.people {
  width: 80%;
  display: block;
  margin: 20rpx auto;
  justify-content: center;
  align-items: center;

  image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    white-space: nowrap;
  }
}

.lottery-button {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background-color: #ff774d;
  color: #fff;
  border: none;
  cursor: pointer;
  position: relative;
  margin: 100rpx auto;
  font-weight: bold;
}

.lottery-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rpx;
  height: 10rpx;
  background-color: rgba(255, 85, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 1.5s ease-out infinite;
}

.lottery-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rpx;
  height: 10rpx;
  background-color: rgba(255, 85, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ripple1 1.5s ease-out infinite;
}

@keyframes ripple1 {
  0% {
    width: 10rpx;
    height: 10rpx;
    opacity: 0;
  }

  50% {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.5;
  }

  100% {
    width: 250rpx;
    height: 250rpx;
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    width: 10rpx;
    height: 10rpx;
    opacity: 0;
  }

  50% {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.5;
  }

  100% {
    width: 300rpx;
    height: 300rpx;
    opacity: 0;
  }
}

.luckinfo {
  width: 95%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20rpx 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-top: -80rpx;
  padding-bottom: 40rpx;

  z-index: 5;
}

.dong {
  width: 100%;
  height: 150rpx;
  overflow: hidden;

  image {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 10rpx;
    border: 2rpx solid #fff;
  }

  .bghui {
    padding: 10rpx 20rpx;
    background: rgba(0, 0, 0, 0.5);
    display: inline-flex;
    color: #fff;
    border-radius: 40rpx;
    margin-left: 0rpx;
    margin-top: 20rpx;
  }
}

.topmain {
  width: 100%;
  padding: 30rpx;
  background: #ff774d;
  background: -moz-linear-gradient(
    top,
    rgba(255, 120, 79, 1) 0%,
    rgba(255, 255, 255, 0.99) 100%
  );
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(255, 120, 79, 1)),
    color-stop(100%, rgba(255, 255, 255, 0.99))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 120, 79, 1) 0%,
    rgba(255, 255, 255, 0.99) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 120, 79, 1) 0%,
    rgba(255, 255, 255, 0.99) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(255, 120, 79, 1) 0%,
    rgba(255, 255, 255, 0.99) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 120, 79, 1) 0%,
    rgba(255, 255, 255, 0.99) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff784f', endColorstr='#ffffff', GradientType=0);
  z-index: -1;
  position: relative;

  .tag {
    padding: 10rpx 20rpx;
    background: #fff;
    color: #ff774d;
    position: absolute;
    border-radius: 10rpx;
    right: 20rpx;
    top: 20rpx;
  }
}

.contain_tab {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  background-color: #ff774d;

  .store_logo {
    width: 56rpx;
    height: 56rpx;
    margin-right: 18rpx;
  }

  .store_name {
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 34rpx;
    color: #fff;
  }

  .store_right {
    width: 36rpx;
    height: 36rpx;
  }
}

.luck_1 {
  .title {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .titlename {
    width: 400rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff774d;
    height: 50rpx;
    background: linear-gradient(to top, #ffdfaa, #fff6aa);
    border-radius: 80rpx 80rpx 0 0;
    //box-shadow: 0 0 8rpx #FF774D;
    //border: 1rpx solid #FF774D;
  }
}
.luckhb {
  width: 100%;
  height: 300rpx;
  //	background: url('../../static/images/red-packets.png') no-repeat top;
  background-size: 100% 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  color: #ff774d;
  font-size: 40rpx;
  position: absolute;
  left: 0;
  top: 0;
}
// .gua{
// 	width: 100%;
// 	display: inline-flex;
// 	position: relative;
// }
// .gua::before{
// 	width: 0;
// 	height: 300rpx;
// 	content: "";
// }
.luckhb {
  width: 100%;
  height: 300rpx;
  background: #fff;
  background-size: 100% 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  color: #df4b43;
  font-size: 40rpx;
  position: absolute;
  left: 0;
  top: 0;
}
.bg-hui {
  color: #757575;
  border: 1rpx solid #757575;
  line-height: 1.3;
  font-size: 22rpx;
}
.fixedbtn {
  width: 100%;
  padding: 0 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #d9d9d9;
  background-color: #fff;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  text {
    font-size: 24rpx;
    line-height: 2;
  }
  .cjbtn {
    width: 145rpx;
    height: 90rpx;
  }
  .sharebtn {
    width: auto;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 145rpx;
    height: 90rpx;
  }
  .btn {
    margin-top: 20rpx;
    width: 400rpx;
    height: 90rpx;
    border-radius: 200px;

    text-align: center;
    display: flex;

    justify-content: center;
    align-items: center;
    image {
      margin-right: 10rpx;
    }
  }
}
.content {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
}
.mylucklist {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
}

.otherluck {
  width: 100%;
  margin: 20rpx 0;
}

.myluck {
  padding: 20rpx;
  border-radius: 20rpx;
  background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
}
.notice {
  width: 710rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20rpx auto;
  background: #fff;
  min-height: 200rpx;
  border-radius: 20rpx;
  .title {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .titlename {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 50rpx;
    background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
    border-radius: 0 0 80rpx 80rpx;
    margin-bottom: 40rpx;
  }

  .kuang {
    background-color: #fff2db;
    color: #525252;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 40rpx;
  }
}

.people {
  width: 80%;
  padding-right: 50rpx;
  display: block;
  margin: 20rpx auto;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 0;

  image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    white-space: nowrap;
  }
}

.dong1 {
  position: fixed;
  left: 20rpx;
  top: -25rpx;
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  z-index: 999;
  pointer-events: none;
  image {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 10rpx;
    border: 2rpx solid #fff;
  }

  .bghui {
    padding: 10rpx 20rpx;
    background: rgba(0, 0, 0, 0.5);
    display: inline-flex;
    color: #fff;
    border-radius: 40rpx;
    margin-left: 0rpx;
    margin-top: 20rpx;
  }
}

.lottery-button {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;

  background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
  color: #fff;
  border: 20rpx solid #f3d7d4;
  cursor: pointer;
  position: relative;
  margin: 30rpx auto;
  font-weight: bold;
}
.lottery-button-end {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;

  background: #757575;
  color: #fff;
  border: 20rpx solid #d1cdc7;
  cursor: pointer;
  position: relative;
  margin: 30rpx auto;
  font-weight: bold;
}
.lottery-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rpx;
  height: 10rpx;
  background-color: rgba(243, 215, 212, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 1.5s ease-out infinite;
}

.lottery-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rpx;
  height: 10rpx;
  background-color: rgba(255, 85, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ripple1 1.5s ease-out infinite;
}

@keyframes ripple1 {
  0% {
    width: 10rpx;
    height: 10rpx;
    opacity: 0;
  }

  50% {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.5;
  }

  100% {
    width: 250rpx;
    height: 250rpx;
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    width: 10rpx;
    height: 10rpx;
    opacity: 0;
  }

  50% {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.5;
  }

  100% {
    width: 300rpx;
    height: 300rpx;
    opacity: 0;
  }
}

.list {
  width: 710rpx;
  margin: 20rpx;
  margin-top: -160rpx;

  .kjbtn {
    padding: 5rpx 10rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
  }

  .item {
    width: 100%;
    border-radius: 20rpx;
    background: #fff;
    margin-top: 25rpx;
    overflow: hidden;
    position: relative;

    .moneybanner {
      width: 100%;
      height: 360rpx;
      background: linear-gradient(0deg, #e04c44 0%, #e04c44 100%);

      .f_110 {
        font-size: 110rpx;
      }
    }

    .c_ffe {
      color: #ffeecb;
    }

    .banner {
      width: 100%;
      height: 360rpx;
    }


      .type_text {
        border-radius: 6rpx;
        background: #fff6f6;
        font-size: 22rpx;
        color: #df4b43;
        margin-right: 10rpx;
        padding: 5rpx 10rpx;
        border-radius: 5rpx;
      }

    .hbtag {
      margin-top: 10rpx;
      background: #fff6f6;
      padding: 5rpx 10rpx;
      border-radius: 5rpx;
      width: 150rpx;

      image {
        width: 30rpx;
      }

      text {
        border-radius: 6rpx;

        font-size: 22rpx;
        color: #df4b43;
      }
    }

    .autho_img {
      position: relative;

      .autho {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
        margin-right: 10rpx;
      }

      .v-icon {
        width: 21rpx;
        height: 21rpx;
        position: absolute;
        left: 40rpx;
        bottom: 0
      }
    }

    .info {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      position: relative;
      &-refresh {
        color: #DF4B43;
        font-size: 24rpx;
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
      }
    }
  }
}

.auth_btn {
  display: flex;
  padding: 20rpx 40rpx;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
  border-radius: 50rpx;
  border: 4rpx solid #f3d7d4;
  background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
}

.contain_tab {
  position: fixed;
  z-index: 99;
  background-color: #df4b43;
  width: 100%;
  left: 0;
  top: 0;

  .tabbar {
    width: 100%;
    position: relative;

    .share {
      position: absolute;
      width: 40rpx;
      left: 40rpx;
    }
  }
}

.bgred {
  padding: 30rpx 0;
  padding-bottom: 180rpx;
  background: linear-gradient(
    180deg,
    #df4b43 55.71%,
    rgba(223, 75, 67, 0) 90.81%
  );

  .store {
    width: 690rpx;
    margin-left: 30rpx;

    .auth {
      position: relative;
      width: 100rpx;
      height: 100rpx;
      margin-right: 40rpx;

      .logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
      }

      .v-icon {
        width: 40rpx;
        height: 4 0rpx;
        position: absolute;
        left: 80rpx;
        bottom: 0
      }
    }
  }
}

.w50 {
  width: 50%;
  color: #fff;
}

page,
body {
  background: #f5f5f5;
}
</style>
